<template>
    <div>
        <!-- 表头分页查询条件， shadow="never" 指定 card 卡片组件没有阴影 -->
        <el-card shadow="never" class="mb-5">
            <!-- flex 布局，内容垂直居中 -->
            <div class="flex items-center">
                <el-text>分类名称</el-text>
                <div class="ml-3 w-52 mr-5">
                    <el-input v-model="searchCategoryName" placeholder="请输入（模糊查询）" />
                </div>

                <el-text>创建日期</el-text>
                <div class="ml-3 w-30 mr-5">
                    <!-- 日期选择组件（区间选择） -->
                    <el-date-picker
                        style="top: 3px"
                        v-model="pickDate"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        :shortcuts="shortcuts"
                        size="default"
                        @change="datepickerChange"
                    />
                </div>

                <el-button type="primary" class="ml-3" :icon="Search" @click="getTableData()">查询</el-button>
                <el-button class="ml-3" :icon="RefreshRight" @click="reset">重置</el-button>
            </div>
        </el-card>
        <el-card shadow="never">
            <!-- 新增按钮 -->
            <div class="mb-5">
                <el-button type="primary" @click="showFormDialog">
                    <el-icon class="mr-1">
                        <Plus />
                    </el-icon>新增
                </el-button>
            </div>

            <!-- 分页列表 -->
            <el-table :data="tableData" border stripe style="width: 100%" v-loading="tableLoading">
                <el-table-column prop="id" label="ID" width="80" v-if="false" />
                <el-table-column prop="name" label="分类名称" width="180" />
                <el-table-column prop="createTime" label="创建时间" width="180" />
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button type="danger" size="small" @click="deleteAction(scope.row.id)">
                            <el-icon class="mr-1">
                                <Delete />
                            </el-icon>删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <div class="mt-10 flex justify-center">
                <el-pagination
                    v-model:current-page="current"
                    v-model:page-size="size"
                    :page-sizes="[10, 20, 50]"
                    :small="false"
                    :background="true"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                />
            </div>
        </el-card>

        <!-- 添加分类 -->
        <!--     
    <el-dialog v-model="dialogVisible" title="添加文章分类" width="40%" :draggable ="true" :close-on-click-modal="false" :close-on-press-escape="false">
        <el-form ref="formRef" :rules="rules" :model="form">
                    <el-form-item label="分类名称" prop="name" label-width="80px">
                        
                        <el-input size="large" v-model="form.name" placeholder="请输入分类名称" maxlength="20" show-word-limit clearable/>
                    </el-form-item>
                </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="onSubmit">
                    提交
                </el-button>
            </span>
        </template>
        </el-dialog>-->
        <!-- 添加分类 -->
        <FormDialog ref="formDialogRef" title="添加文章分类" destroyOnClose @submit="onSubmit">
            <el-form ref="formRef" :rules="rules" :model="form">
                <el-form-item label="分类名称" prop="name" label-width="80px" size="large">
                    <el-input v-model="form.name" placeholder="请输入分类名称" maxlength="20" show-word-limit clearable />
                </el-form-item>
            </el-form>
        </FormDialog>
    </div>
</template>

<script setup>
// 引入所需图标
import { Search, RefreshRight } from '@element-plus/icons-vue'
import { ref, reactive } from 'vue'
import moment from 'moment'
import { getCategoryPageList, addCategory, deleteCategory } from '@/api/admin/category'
import { showMessage, showModel } from '@/composables/util'
import FormDialog from '@/components/FormDialog.vue'
// 分页查询的分类名称
const searchCategoryName = ref('')
// 日期
const pickDate = ref('')
// 表格数据
const tableData = ref([])
//加载状态
const tableLoading = ref(false)
// 当前页码，给了一个默认值 1
const current = ref(1)
// 总数据量，给了个默认值 0
const total = ref(0)
// 每页显示的数据量，给了个默认值 10
const size = ref(10)

// 查询条件：开始结束时间
const startDate = ref('')
const endDate = ref('')
// 监听日期组件改变事件，并将开始结束时间设置到变量中
const datepickerChange = (e) => {
    if (null == e) {
        startDate.value = ''
        endDate.value = ''
    } else {
        startDate.value = moment(e[0]).format('YYYY-MM-DD')
        endDate.value = moment(e[1]).format('YYYY-MM-DD')
    }
    console.log('开始时间：' + startDate.value + ', 结束时间：' + endDate.value)
}

const shortcuts = [
    {
        text: '最近一周',
        value: () => {
            const start = new Date()
            const end = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            return [start, end]
        },
    },
    {
        text: '最近一个月',
        value: () => {
            const start = new Date()
            const end = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            return [start, end]
        },
    },
    {
        text: '最近三个月',
        value: () => {
            const start = new Date()
            const end = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            return [start, end]
        },
    },
]

// 获取分页数据
function getTableData() {
    // 调用后台分页接口，并传入所需参数
    // 显示表格 loading
    tableLoading.value = true
    getCategoryPageList({
        current: current.value,
        size: size.value,
        startDate: startDate.value,
        endDate: endDate.value,
        name: searchCategoryName.value,
    }).then((res) => {
        if (res.success == true) {
            tableData.value = res.data
            current.value = res.current
            size.value = res.size
            total.value = res.total
        } else {
            showMessage(res.message, 'error')
        }
    }).finally(() => {
        // 隐藏表格 loading
        tableLoading.value = false
    })
}

// 对话框是否显示
const dialogVisible = ref(false)
// 表单引用
const formRef = ref(null)

const form = reactive({
    name: '',
})

// 规则校验
const rules = {
    name: [
        {
            required: true,
            message: '分类名称不能为空',
            trigger: 'blur',
        },
        {
            min: 1,
            max: 20,
            message: '分类名称字数要求大于 1 个字符，小于 20 个字符',
            trigger: 'blur',
        },
    ],
}

const onSubmit = () => {
    // 先验证 form 表单字段
    formRef.value.validate((valid) => {
        if (!valid) {
            console.log('表单验证不通过')
            return false
        }
        formDialogRef.value.showBtnLoading();
        // 请求添加分类接口
        addCategory(form).then((res) => {
            if (res.success == true) {
                showMessage('添加成功')
                // 将表单中分类名称置空
                form.name = ''
                // 隐藏对话框
                formDialogRef.value.close()
                // 重新请求分页接口，渲染数据
                getTableData()
            } else {
                // 获取服务端返回的错误消息
                let message = res.message
                // 提示错误消息
                showMessage(message, 'error')
            }
        }).finally(() => {formDialogRef.value.closeBtnLoading();})
    })
}

const deleteAction = (id) => {
    // 调用后台删除分类接口
    showModel('是否确认删除该分类？', 'warning').then(() => {
        deleteCategory({ id: id }).then((res) => {
            if (res.success == true) {
                showMessage('删除成功')
                // 重新请求分页接口，渲染数据
                getTableData()
            } else {
                showMessage(res.message, 'error')
            }
        })
    })
}
function reset (){
    startDate.value=''
    endDate.value=''
    pickDate.value=''
    searchCategoryName.value=''
}
const formDialogRef = ref(null)
const showFormDialog = () => {
    console.log(formDialogRef.value)
    formDialogRef.value.open()
}
</script>
